<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="item">
                    <div class="title">班级名称:</div>
                    <div class="content">{{classInfo.name}}</div>
                </div>
            </el-col>
            
            <el-col :span="8">
                <div class="item">
                    <div class="title">状态:</div>
                    <div class="content">{{status[classInfo.status]}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">销售价格:</div>
                    <div class="content">{{classInfo.price}}元</div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="item">
                    <div class="title">开始时间:</div>
                    <div class="content">{{classInfo.startTime}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">结束时间:</div>
                    <div class="content">{{classInfo.endTime}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">校区:</div>
                    <div class="content">{{classInfo.schoolName}}</div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="item">
                    <div class="title">教师:</div>
                    <div class="content">{{classInfo.teacherName}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">课程科目:</div>
                    <div class="content">{{classInfo.subjectName}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">班级类型:</div>
                    <div class="content">{{classInfo.classTypeName}}</div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="item">
                    <div class="title">课程分类:</div>
                    <div class="content">{{classInfo.categoryName}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">年级:</div>
                    <div class="content">{{classInfo.gradeName}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">总课时:</div>
                    <div class="content">{{classInfo.lessonNum}}</div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="item">
                    <div class="title">总人数:</div>
                    <div class="content">{{classInfo.totalNum}}</div>
                </div>
            </el-col>
           
            <el-col :span="8">
                <div class="item">
                    <div class="title">剩余名额:</div>
                    <div class="content">{{classInfo.restCount}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">要求分数:</div>
                    <div class="content">{{classInfo.score}}</div>
                </div>
            </el-col>
            
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="item">
                    <div class="title">是否结束:</div>
                    <div class="content">{{isOver[classInfo.isOver]}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">校验分数:</div>
                    <div class="content">{{isValid[classInfo.isValid]}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">正式班:</div>
                    <div class="content">{{isFormal[classInfo.isFormal]}}</div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="item">
                    <div class="title">课程频次:</div>
                    <div class="content">{{classInfo.rate}}</div>
                </div>
            </el-col>
            
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="item">
                    <div class="title">班级图片:</div>
                    <div class="content">
                        <img v-if="classInfo.uploadUrl" :src="classInfo.uploadUrl" alt="">
                        <span></span>
                    </div>
                </div>
            </el-col>
            <el-col :span="18">
                <div class="item">
                    <div class="title">班级简介:</div>
                    <div class="content" style="width:160px;flex-wrap:nowrap;overflow:hidden;">{{classInfo.introduction}}</div>
                </div>
            </el-col>
            
        </el-row>
        <div class="select-title">上课日期表</div>
        <div style="height:200px;overflow:auto;">
            <el-table
            :data="classInfo.lessonEntityList"
            border
            style="width: 100%;">
            <el-table-column
                type="index"
                header-align="center"
                align="center"
                label="序号"
                width="50">
                
            </el-table-column>
            <el-table-column
                prop="lessonPeriod"
                header-align="center"
                align="center"
                label="上课时间"
                width="200"
                show-overflow-tooltip>
                
            </el-table-column>
            <el-table-column
                prop="startTime"
                header-align="center"
                align="center"
                label="上课时间">
            </el-table-column>
            <el-table-column
                prop="endTime"
                header-align="center"
                align="center"
                label="下课时间">
            </el-table-column>
            
            
            </el-table>
        </div>
        <div class="select-title">班级学员表</div>
            <el-table
        :data="studentList"
        border
        style="width: 100%;">
        <el-table-column
            type="index"
            header-align="center"
            align="center"
            label="序号"
            width="50">
            
        </el-table-column>
        <el-table-column
            prop="studentName"
            header-align="center"
            align="center"
            label="学生姓名"
            width="100"
            show-overflow-tooltip>
            
        </el-table-column>
        <el-table-column
            prop="studentNo"
            header-align="center"
            align="center"
            label="学号">
        </el-table-column>
        <el-table-column
            prop="gender"
            header-align="center"
            align="center"
            label="性别">
            <template slot-scope="scope">
                <div v-if="scope.row.gender == 2">男</div>
                <div  v-if="scope.row.gender == 1">女</div>
            </template>
        </el-table-column>
        <el-table-column
            prop="schoolName"
            header-align="center"
            align="center"
            label="校区">
        </el-table-column>
        <el-table-column
            prop="gradeName"
            header-align="center"
            align="center"
            label="年级">
        </el-table-column>
        <el-table-column
            prop="score"
            header-align="center"
            align="center"
            label="分数">
        </el-table-column>
        
        
        
        </el-table>
        <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
</template>
<script>
export default {
    data () {
        return {
            classInfo: '',
            studentList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            status:{
                '1': '发布',
                '2': '作废',
                '5': '其他'
            },
            isOver: {
                '0': '否',
                '1': '是'
            },
            isFormal: {
                '0': '否',
                '1': '是'
            },
            isValid: {
                '0': '否',
                '1': '是'
            },

            isOld:{
                '0': '否',
                '1': '是'
            }
        }
    },
    methods:{
        getClassInfo(classId) {
            this.$http({
              url: this.$http.adornUrl(`/sys/educlass/info/${classId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.classInfo = data.eduClass;
         
              }
            })
        },
        
        getStudentByClassId(classId) {
            this.$http({
              url: this.$http.adornUrl(`/sys/edustudent/${classId}/get`),
              method: 'get',
              params: this.$http.adornParams({
                'page': this.pageIndex,
                'limit': this.pageSize,

            })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.studentList = data.page.list;
                this.totalPage = data.page.totalCount
              }else{
                this.studentList = []
                this.totalPage = 0
              }
            })
        },
          // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        let classId = this.$route.query.classId;
        this.getStudentByClassId(classId)
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        let classId = this.$route.query.classId;
        this.getStudentByClassId(classId)
      },
    },
    created: function () {

        let classId = this.$route.query.classId;
        this.getClassInfo(classId);
        this.getStudentByClassId(classId);
    }
}
</script>
<style scoped>
.item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin:  20px;
}
.item .title {
    width: 100px;
    color: #777;
}
.item .content {
    flex: 1;
    color: #454545;
}
.content img{
    width: 60px;
    height: 60px;
    overflow: hidden;
}
.select-title{
    font-size: 14px;
    font-weight: 700;
    color: #454545;
    margin: 10px 0;
    background-color: #efefef;
    padding: 4px 4px ;
}
</style>